<template>
  <div class="ele-body">

    <el-card shadow="never" v-loading="loading" style="min-height: calc(100vh - 130px)">
      <template v-slot:header>
        <el-form :inline="true">
          <el-form-item style="margin-bottom: 0">
            <el-select v-model="id" placeholder="查看具体项目" @change="queryGanttData" v-if="refresh" clearable>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <el-empty v-if="data.length<=0"  description="暂无数据" ></el-empty>
      <wlGantt
        v-if="show"
        :data="data"
        :start-date="MinDate"
        :end-date="MaxDate"
        :useRealTime="true"
        :edit="false"
        lazy
        :checkSource="true"
        height="calc(100vh - 223px)"
        size="small"
      >
        <el-table-column width="110" align="center" label="实际开始日期" prop="realStartDate">
        </el-table-column>
        <el-table-column width="110" align="center" label="实际结束日期" prop="realEndDate">
        </el-table-column>
        <el-table-column width="110" align="center" label="进度状态" prop="schedule_text">
          <template v-slot="{row}">
            {{row.schedule_text}}
          </template>
        </el-table-column>
      </wlGantt>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      loading: false,
      show: false,
      refresh: true,
      data: [],
      options: [],
      MaxDate: '2010-01-01',
      MinDate: '2050-01-01',
      id: null,
    }
  },
  watch: {
    $route(current) {
      if (current.name === '/project/gantt') {
        this.id = +this.$route.query.id || null
        this.queryGanttData(this.id)
      }
    },
  },
  mounted() {
    this.id = +this.$route.query.id || null
    this.queryGanttData(this.id)
    this.queryProjectList().catch(error => this.$message.error(error))
  },
  methods: {
    //获取甘特图数据
    async queryGanttData(id) {
      this.loading = true
      this.show = false
      const res = (await this.$http.get('/projects/gantt/data?is_pc=1', {params: {project_id: id}})).data
      res.success ? this.data = (() => {
        this.initDate();
        return res.data ? this.formatData(res.data) : []
      })() : this.$message.error(res.msg)
      this.show = true
      this.loading = false
    },
    //获取项目选择框数据
    async queryProjectList() {
      const res = (await this.$http.get(`/projects/gantt/projects?is_pc=1`)).data
      res.success ? this.options = res.data : this.$message.error(res.msg);
    },


    formatData(data) {
      return data ? data.map((item) => {
        const {plan_start_at, plan_complete_at, start_at, complete_at, tasks} = item
        let children
        if (tasks instanceof Array && tasks.length > 0) {
          children = this.formatData(tasks)
        }
        Date.parse(this.MaxDate) < Date.parse(plan_complete_at) ? this.MaxDate = plan_complete_at : false
        Date.parse(this.MaxDate) < Date.parse(complete_at) ? this.MaxDate = complete_at : false
        Date.parse(this.MinDate) > Date.parse(plan_start_at) ? this.MinDate = plan_start_at : false
        Date.parse(this.MinDate) > Date.parse(start_at) ? this.MinDate = start_at : false

        let newData = {
          ...item,
          id: item.id + item.name,
          startDate: plan_start_at,
          endDate: plan_complete_at,
        }

        complete_at !== '--' ? newData.realEndDate = complete_at : false;
        start_at !== '--' ? newData.realStartDate = start_at : false;
        children ? newData.children = children : false;
        return newData
      }) : null
    },
    initDate() {
      this.MaxDate = '2010-01-01'
      this.MinDate = '2050-01-01'
    },
  },
}

</script>

<style scoped>
.content {
  height: calc(100vh - 223px);
}

.wl-gantt ::v-deep.wl-item-end:after {
  z-index: 0;
}

.wl-gantt ::v-deep.wl-item-start:after {
  z-index: 0;
}

::v-deep .wl-gantt .wl-item-full:after,::v-deep .wl-gantt .wl-item-full:before {
  z-index: 0 ;
}
::v-deep .wl-item-full:after,::v-deep .wl-item-full:before{
  z-index: 0;
}


::v-deep .wl-gantt .name-col .task-remove {
  display: none;
}

::v-deep .wl-gantt .name-col .task-add {
  display: none;
}
</style>
